<template>
    <div>
       <el-card shadow="never">
      <el-button icon="el-icon-document-add" type="primary" @click="handleAdd()"
        >添加</el-button
      >
    </el-card>
    <!-- 卡片视图 -->
    <el-card>
      <el-table :data="rightsList" style="width: 100%" border stripe  :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }">
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column prop="authName" label="权限名称"></el-table-column>
      <el-table-column prop="path" label="路径"></el-table-column>
            <el-table-column prop="role" label="角色"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.level === '0'">一级</el-tag>
          <el-tag type="success" v-else-if="scope.row.level === '1'">二级</el-tag>
          <el-tag type="warning" v-else>三级</el-tag>
        </template>
      </el-table-column>
       <el-table-column label="是否启用">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isEnable"
            @change="change(scope.$index, scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
    </el-table>
    </el-card>
     <!-- 对话框 -->
    <el-dialog
      title="权限列表信息"
      :visible.sync="dialogFormVisible"
      width="600px"
    >
      <el-form :model="form">
        <el-form-item label="权限名称" prop="authName" :label-width="formLabelWidth">
          <el-input v-model="form.authName"></el-input>
        </el-form-item>
        <el-form-item label="路径" prop="path" :label-width="formLabelWidth">
          <el-input v-model="form.path"></el-input>
        </el-form-item>
         <el-form-item label="角色" prop="role" :label-width="formLabelWidth">
          <el-input v-model="form.role"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
    </div>
</template>
<script>
export default {
  data () {
    return {
      dialogFormVisible:false,
      form:{

      },
      rightsList: [
        {
          id:1,
          authName:'admin',
          path:'',
          role:'超级管理员',
          level:'0',
          isEnable:true
        },
         {
          id:2,
          authName:'少皇',
          path:'',
          role:'管理员',
          level:'1',
            isEnable:true
        },
         {
          id:3,
          authName:'少皇2.0',
          path:'',
          role:'管理员',
          level:'2',
            isEnable:true
        }
      ]
    }
  },
  created () {
    this.getRightsList()
  },
  methods: {
    //添加
    handleAdd(){
      this.dialogFormVisible=true
    },

     getRightsList () {
      // const { data: res } = await this.$http.get('rights/list')
      // // console.log(res)
      // if (res.meta.status !== 200) {
      //   return this.$message.error('获取数据失败')
      // }
      // this.rightsList = res.data
    }
  }
}
</script>
<style  scoped>

</style>
